<template>
    <div style="font-size: .16rem">
        <div class="top-nav">
            <p style="font-weight: bold;line-height: .3rem;">场景对话选择</p>
        </div>
        <div class="shop-all-list">
            <transition name="fade">
                <div class="shop-list" v-show="allData.length > 0">
                    <div class="top-div-first"></div>
                    <div v-for="(data, index) in allData" class="shop-content">
                        <div style="flex: 1" class="shop-info">
                            <a>{{data.partName}}</a>
                            <p class="star-content">
                                <select-star :rating="data.level" :starwidth="1.1" :starheight="0.2"></select-star>
                            </p>
                        </div>
                        <div style="display:flex;flex: 1;align-items: center;justify-content: space-between">
                            <div @click="selectChat(index)" style="border: .01rem solid #1593d4;color: #1593d4;padding: .03rem;border-radius: .03rem;margin-right: .1rem;"><p>对话记录</p></div>
                            <div @click="selectPart(index)" style="border: .01rem solid #f76260;color: #f76260;padding: .03rem;border-radius: .03rem;margin-right: .1rem;"><p>进入场景</p></div>
                        </div>
                    </div>
                    <div class="bottom-div">
                        <!--<p>数据加载完毕</p>-->
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import {getData} from "../../../config/getData";
    import ratingStar from '../../commons/common/ratingStar.vue';
    import selectStar from '../../commons/common/selectStar.vue';
    export default {
        data() {
            return {
                allData: []
            }
        },
        mounted() {
            this.initMenu();
        },
        components: {
            ratingStar,
            selectStar
        },
        methods: {
            initMenu() {
                let data = getData("all");
                let pushArr = [];
                Object.keys(data).forEach(id => {
                    let value = data[id];
                    pushArr[id] = value;
                })
                this.allData = pushArr;
                console.log(pushArr);
            },
            selectPart(index) {
                this.$router.push({
                    path: '/home/progress',
                    query: {
                        partid: index,
                    }
                })

            },
            selectChat(index) {
                this.$router.push({
                    path: '/home/record',
                    query: {
                        partid: index,
                    }
                })

            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .top-nav {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        background: rgba(219, 216, 216, 0.9);
        text-align: center;
        font-size: .14rem;
        z-index: 6;
        height: .3rem;
    }

    .address_empty_right {
        width: .16rem;
        height: .16rem;
        fill: #ccc;
        margin-top: .2rem;
    }

    .shop-all-list {
        position: relative;
        background-color: #FFF;
        .shop-list {
            z-index: 1;
            font-size: 0.13rem;
            img {
                width: 0.6rem;
                height: 0.6rem;
            }
            .shop-content {
                display: flex;
                width: 100%;
                padding: 0.1rem;
                border-bottom: 0.01rem solid #E8E5E5;
                .shop-info {
                    width: 100%;
                    padding: 0.05rem;
                    a {
                        font: 0.15rem/0.15rem "PingFangSC-Regular";
                        font-weight: 600;
                    }
                    .shop-type {
                        font-size: 0.09rem;
                        margin-top: 0.03rem;
                        color: #666666;
                        .shop-type-single {
                            margin-right: 0.06rem;
                            i {
                                color: #09a909;
                                font-size: 0.09rem;
                            }
                        }
                    }
                    .star-content {
                        display: flex;
                        align-items: baseline;
                        margin-top: 0.03rem;
                        .star-rating {
                            font-size: 0.1rem;
                            color: #666
                        }
                        .star-sale {
                            font-size: 0.1rem;
                            margin-left: 0.06rem;
                            color: #666;
                        }
                    }
                    .under-dashed {
                        border-top: 0.008rem dashed #d5d9de;
                        margin-top: 0.04rem;
                    }
                    .shop-remark {
                        font-size: 0.1rem;
                        margin-top: 0.04rem;
                        color: #666666;
                    }
                }
            }
            .top-div-first {
                height: 0.1rem;
            }
            .top-div-second {
                height: 0.34rem;
            }
            .bottom-div {
                height: 0.5rem;
                line-height: 0.5rem;
                text-align: center;
            }
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-active {
        opacity: 0;
    }
</style>